<template>
	<!-- 轮播图 -->
	<u-swiper height="500rpx" :list="swiperList"></u-swiper>
	<!-- 切换栏 -->
	<!-- 切换栏 -->
	<u-sticky zIndex="999" offsetTop="0">
		<u-row>
			<u-col span="12" customStyle="background: #fff;">
				<u-tabs :current="0" :list="tabList" lineColor="#07C160" :itemStyle="{width: '25%', height: '94rpx', fontSize: '26rpx'}" :inactiveStyle="{fontSize: '26rpx'}"
					:activeStyle="{color: '#292929', fontWeight: 'bold', fontSize: '28rpx'}"></u-tabs>
			</u-col>
		</u-row>
	</u-sticky>
	<view class="welfare-list">
		<view class="welfare-item" v-for="(item, i) in 10" :key="i">
			<u-image src="/static/logo.png" width="180rpx" height="180rpx"></u-image>
			<view class="welfare-content">
				<view class="title">渴望听见世界的声音渴望听见世界的声音渴望听见世界的声音渴望听见世界的声音</view>
				<view class="tags">
					<u-tag borderColor="transparent" bgColor="#FEE6D9" color="#565656" text="旧衣捐赠" plain size="mini" type="warning"></u-tag>
					<view class="left">
						<u-tag  borderColor="transparent" bgColor="#E7EEFF" color="#565656" text="发放证书" plain size="mini" type="warning"></u-tag>
					</view>
				</view>
				<view class="name">执行机构</view>
				<u-image src="/static/logo.png" width="105rpx" height="30rpx"></u-image>
				<view class="btn-box">
					<u-button color="#F98240" throttleTime="1000" size="mini">帮助ta</u-button>
				</view>
			</view>
		</view>
	</view>
	<view class="more">
		<u-loadmore line :status="status" />
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	// 轮播图
	const swiperList = reactive([
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
	])
	// 切换栏
	const tabList = reactive([
		{ name: '全部', id: 0 },
		{ name: '支付宝公益', id: 1 },
		{ name: '温暖包', id: 2 },
		{ name: '精准帮扶', id: 3 },
	])
	const status = ref('loadmore')
</script>

<style lang="scss" scoped>
	.welfare-list {
		padding: 26rpx 42rpx 10rpx;
		.welfare-item {
			position: relative;
			@include flex-center(100%);
			background: #FFFFFF;
			border-radius: 14rpx;
			margin-bottom: 26rpx;
			padding: 10rpx 16rpx;
			.btn-box {
				position: absolute;
				right: 22rpx;
				bottom: 22rpx;
				z-index: 99;
			}
			.welfare-content {
				flex: 1;
				margin-left: 40rpx;
				.title {
					@include over-ellip();
					width: 420rpx;
					color: #000000;
					font-size: 26rpx;
				}
				.tags {
					margin-top: 16rpx;
					display: flex;
					.left {
						margin-left: 12rpx;
					}
				}
				.name {
					margin-top: 16rpx;
					color: #000000;
					font-size: 22rpx;
					margin-bottom: 12rpx;
				}
			}
		}
	}
	.more {
		padding-bottom: 50rpx;
	}
</style>
